<template>
  <div class="Navbox">
    <div class="NavIcon" @click="ChangeIsNavShow">
      <img :src="naviconUrl" alt="" />
    </div>
    <div class="planBox" ref="planBox" :class="isNavShow ? 'ShowPlan' : 'ClosePlan'"
     @click="clickPosition($event)">
      <div class="plan-content">
        <ul class="topBox">
          <li><img src="~assets/image/nav/nav-logo.png" alt="" /></li>
          <li @click="ChangeIsNavShow"><img src="~assets/image/nav/nav-close.png" alt="" /></li>
        </ul>
        <ul class="contentBox">
          <li
            v-for="(item, index) in navData"
            :key="index"
            @click="navContentClick(index), goPath(index)"
            :class="{ activeItem: index == navItem }"
          >
            <div class="navOne">
              <span>{{ item.title }}</span>
              <div>
                <img v-if="item.childrenNav.length > 0" src="~assets/image/nav/nav-icon03.png" alt="" />
              </div>
            </div>
            <ul v-if="item.childrenNav.length > 0" class="childrenContent">
              <li
                v-for="(childrenItem, childrenIndex) in item.childrenNav"
                @click="goChildrenPath(index,childrenIndex)"
                :key="childrenIndex"
              >
                <span>{{ childrenItem.childrenTitle }}&nbsp;&nbsp;></span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Nav',
  props:{
    naviconUrl:{
      type:String,
      default:()=>{
        return require('assets/image/nav/nav-icon01.png')
      }
    }
  },
  data() {
    return {
      // iconUrl:require('')
      isNavShow: false,
      navData: [
        {
          title: '首页',
          childrenNav: [],
          path: '/home'
        },
        {
          title: 'MES/MOM',
          childrenNav: [
            {
              childrenTitle: 'MES/MOM',
              childrenPath: '/mes'
            },
            {
              childrenTitle: '设备管理',
              childrenPath: '/equipment'
            },
            {
              childrenTitle: '质量管理',
              childrenPath: '/quality'
            },
            {
              childrenTitle: '数据采集',
              childrenPath: '/dataColl'
            },
            {
              childrenTitle: '生产管理',
              childrenPath: '/production'
            },
            {
              childrenTitle: '数据可视化',
              childrenPath: '/visualization'
            },
            {
              childrenTitle: '物料管理',
              childrenPath: '/material'
            },
            {
              childrenTitle: '智慧配棉',
              childrenPath: '/cotton'
            },
            {
              childrenTitle: '产品数据',
              childrenPath: '/device'
            }
          ],
          path: ''
        },
        {
          title: 'ERP',
          childrenNav: [],
          path: '/erp'
        },
        {
          title: 'WMS',
          childrenNav: [],
          path: '/wms'
        },
        {
          title: '纺智云',
          childrenNav: [],
          path: '/cloud'
        },
        {
          title: '行业应用',
          childrenNav: [],
          path: '/supply'
        },
        {
          title: '纺织供应链',
          childrenNav: [],
          path: '/zhi'
        },
        {
          title: '关于我们',
          childrenNav: [],
          path: '/me'
        }
      ],
      navItem: -1
    }
  },
  watch: {},
  mounted() {
    
  },
  methods: {
    ChangeIsNavShow() {
      this.isNavShow = !this.isNavShow
      if(this.isNavShow) this.getItemIndex()
    },
    navContentClick(index) {
      if (this.navItem === index) {
        this.navItem = -1
        return
      }
      this.navItem = index
    },
    goPath(index) {
      if (this.navData[index].path !== '') {
        // this.$router.push({path:'/device'})
        this.$router.push(this.navData[index].path)
        this.ChangeIsNavShow()
      }
      

    },
    goChildrenPath(index,childrenIndex){
      // if(this.navData[index].path === ''&&childrenIndex!==undefined){
        this.$router.push(this.navData[index].childrenNav[childrenIndex].childrenPath)
        this.ChangeIsNavShow()
      // }
    },
    clickPosition(e){
      if(e.target.className==this.$refs.planBox.className){
        this.ChangeIsNavShow()
      }
    },
    //根据路劲获取索引
    getItemIndex(){
      for (let index = 0; index < this.navData.length; index++) {
        if(this.navData[index].path===this.$store.state.app.pathNow){
          this.navItem=index
          return;
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../assets/css/nav.scss';
</style>
